<template>
	<view class="updatePage">
		<view class="title">
			设置{{title}}
		</view>
		<view class="inputBorder" style="border: none;">
			<uni-easyinput style="border: none;" :type="type" :placeholder="'请输入'+title"
				v-model="value"></uni-easyinput>
		</view>
		<view class="fixBtn">
			<button @click="finsh" type="primary">完成</button>
		</view>
	</view>
</template>

<script>
	import {
		regPhone,
		regIdCard
	} from '../../utils/regExp.js'
	export default {
		data() {
			return {
				type: '',
				title: '',
				key: '',
				userName: '',
				userPhone: ''
			}
		},
		onLoad(options) {
			this.value = options.value
			this.type = options.type
			this.title = options.title
			this.key = options.key
		},
		methods: {
			// 完成
			finsh() {
				let userInfo = uni.getStorageSync('userInfo')
				if (this.key == 'UserName') userInfo.RealName = this.value
				userInfo[this.key] = this.value
				if (this.title == '手机号' && !regPhone.test(this.value)) return this.$api.msg('请输入正确的手机号')
				if (this.title == '身份证号' && !regIdCard.test(this.value)) return this.$api.msg('请输入正确的身份证号')
				this.saveData(userInfo)
			},
			saveData(userInfo) {
				this.$http('post', '/Base_Manage/Base_User/SaveData', userInfo).then(res => {
					if (res.Success) {
						uni.showToast({
							icon: 'none',
							title: '保存成功'
						})
						uni.setStorageSync('userInfo', userInfo)
						this.back()
					}
				})
			},
			back() {
				setTimeout(() => {
					uni.navigateBack()
				}, 1000)
			}
		},
	}
</script>

<style lang="scss" scoped>
	::v-deep.uni-easyinput__content-input {
		height: 40px;
	}

	.updatePage {
		box-sizing: border-box;
		height: 100vh;
		padding: 30px;
		background-color: #fff;

		.title {
			font-weight: 500;
			font-size: 24px;
			text-align: center;
			margin-bottom: 10vh;
		}

		.inputBorder {
			height: 40px;
			border-top: 1px solid #ccc;
			border-bottom: 1px solid #ccc;
		}

		.finsh {
			position: absolute;
			bottom: 100px;
			left: 30px;
			width: calc(100% - 60px);
		}

		.fixBtn {
			position: fixed;
			bottom: 40px;
			width: calc(100% - 60px);
			left: 30px;
		}
	}
</style>